<template>
	<view class="coupon-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" title="Store Activities"    navType="navBackTitle">
			</c-navigation-bar>
			
			<!-- <u-tabs-swiper ref="uTabs" :list="swiperList" font-size="36" @change="tabsChange"
			:is-scroll="false" class="swiper" active-color="#2934D0"  :current="current"  
			></u-tabs-swiper> -->
			
			<view class="detail">
				<searchType  :searchType='searchType' @getCurTabIndex='getCurTabIndex' class="swiper">
				    <template v-for="(swiper,index) in searchType.info" :slot='index'>
				        <swiper-item @catchtouchmove="stopTouchMove" :key="index">
				            <scroll-view class="main-info" scroll-y="true">
				                <view class="item" v-if="index==0" v-for="(card,index) in swiper.data" :key="index">
				                    <couponCard :info="card" @goNavigate="goEventDetail"></couponCard>
				                </view>
								<view class="item" v-if="index==1" v-for="(card,index) in swiper.data" :key="index">
								    <couponCard :info="card" @goNavigate="goEventDetail"></couponCard>
								</view>
								<view class="item" v-if="index==2" v-for="(card,index) in swiper.data" :key="index">
								    <couponCard :info="card" @goNavigate="goEventDetail"></couponCard>
								</view>
								<view class="item" v-if="index==3" v-for="(card,index) in swiper.data" :key="index">
								    <couponCard :info="card" @goNavigate="goEventDetail"></couponCard>
								</view>
				            </scroll-view>
				        </swiper-item>
				   </template>
				</searchType>
		
				<!-- <view class=""> -->
				<!-- <couponCard v-for="(item,id)  in list" :info="item" :key="id+''+'1'" type="notUsed" @goNavigate="goEventDetail"></couponCard>
				<couponCard v-for="(item,id)  in list" :info="item" :key="id+'2'" type="Used"></couponCard>
				<couponCard v-for="(item,id)  in list" :info="item" :key="id+'3'" type="EXPREID"></couponCard> -->
				<!-- </view> -->
			</view>
			
		</c-layout>
		<u-popup class="coupon-type-pop" mode="bottom" borderRadius="60" v-model="couponTypePopShow">
			<view class="popup-main">
				<view class="type-tags">
					<view @click="currentType = item"
						:class="`capsule ${currentType.id === item.id ? 'is-selected':''}`"
						v-for="item in couponTypeList" :key="item.id">
						{{item.val}}
					</view>
				</view>
				<button type="default" @click="changeCurrentTypeData">Confirm</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				searchType: {
					tabList: ["Product", "Shops", "Activity", "Anchor", "Video", "Anchor", "Video"],
				    //内容Data
				    info: [
				        {
				            data: [{
				                imageSrc: require('static/images/home/event-1.png'),
				            }, {
				                imageSrc: require('static/images/home/event-1.png'),
				            }]
				        },
				        {
				            data: [{
				                imageSrc: require('static/images/home/event-2.png'),
				            }, {
				                imageSrc: require('static/images/home/event-2.png'),
				            }]
				        },
				        // 视频
				        {
				            data: [{
				                imageSrc: require('static/images/home/event-3.png'),
				            }, {
				                imageSrc: require('static/images/home/event-3.png'),
				            }]
				        },
						{
						    data: [{
						        imageSrc: require('static/images/home/event-4.png'),
						    }, {
						        imageSrc: require('static/images/home/event-4.png'),
						    }]
						}
				    ]
				},
				current: 2, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				list: [{
						baifenbi: '50%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: '/static/images/activite.png'
					},
					{
						baifenbi: '70%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/18894baf3e370ffd97ea2bd5245429bf5c8d8e39.png'
					},
					{
						baifenbi: '50%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/e2d8a4de4c2119be40137a1a7f94428c253966c8.png'
					},
					{
						baifenbi: '75%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/8e0ab6851ddc64fcfacad6970bb357f911a1da6b.png'
					}
				],
				// 优惠券类型选择
				couponTypePopShow: false,
				// 优惠券类型列表
				couponTypeList: [{
						id: 1,
						val: 'All types'
					},
					{
						id: 2,
						val: 'Shopping voucher'
					},
					{
						id: 3,
						val: 'Shop coupon'
					},
					{
						id: 4,
						val: 'Commodity coupon'
					},
				],
				// 当前选中
				currentType: {
					id: 1
				},
				// 需要提交的
				currentTypeData: {},

			};
		},
		methods: {
			//冒泡事件避免影响底层滚动
			stopTouchMove() {
			    return false;
			},
			goEventDetail(){
				this.$u.init.whetherToLogin(() => {
					uni.navigateTo({
						url: '/pages/storyType/storeManagement/eventDetail',
						"animationType": "slide-in-right",
						"animationDuration": 300
					})
				})
			},
			tabsChange(index) {
				this.current = index;
				},
			// 打开选择优惠券类型弹出层
			openSelect() {
				this.currentType = {
					...this.currentTypeData
				}
				this.couponTypePopShow = true
			},
			// 
			changeCurrentTypeData() {
				this.currentTypeData = {
					...this.currentType
				}
				this.couponTypePopShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .nav-search{
		border-bottom: none !important;
	}
	.coupon-container {
		.detail{
			padding: 40rpx 48rpx 0rpx 40rpx;
			
		}
		.swiper{
			margin-bottom: 60rpx;
			font-size: 36rpx ;
			font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
			font-weight: 400;
			color: #999CAD;	
			margin-left: 30rpx;
		}
		// 	&:nth(2){
		// 		margin-top: 60rpx;
		// }
		.slot-icon {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.container-box {}

		.coupon-type-pop {
			.popup-main {
				padding: 80rpx 40rpx;
				padding-left: 20rpx;

				.type-tags {
					display: flex;
					flex-wrap: wrap;

					.capsule {
						margin-left: 20rpx;
						margin-bottom: 40rpx;
						white-space: nowrap;
						padding: 0 20rpx;
						height: 68rpx;
						line-height: 68rpx;
						border-radius: 34rpx;
						background: #f5f6f8;
						background-blend-mode: normal;
						font-size: 24rpx;
						color: #c9c9c9;

						&.is-selected {
							color: #fff;
							background-color: #2934d0;
						}
					}
				}

				>button {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
